<template>
   <view class="common-card hot-song-box">
        <view class="title-box">
          <view class="sub-title">排行榜</view>
          <view class="title">热歌风向标</view>
        </view>

        <view class="m-content">
          <swiper class="swiper" :indicator-dots="true" :autoplay="false">
            <swiper-item>
              <view class="swiper-item">
                <view class="title">云音乐新歌榜</view>
                <view class="song-list">
                  <view
                    class="song-list-item"
                    v-for="(item, index) in topList.newSong"
                    :key="index"
                    @tap="onClickMusicItem(item)"
                  >
                    <u-image
                      width="100rpx"
                      height="100rpx"
                      border-radius="10"
                      :src="item.al.picUrl + '?param=270y270'"
                    ></u-image>
                    <view class="index">{{ index + 1 }}</view>
                    <view class="song-name">{{ item.name }}</view>
                    <view style="margin: 0 10rpx">-</view>
                    <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <view class="title">云音乐热歌榜</view>
                <view class="song-list">
                  <view
                    class="song-list-item"
                    v-for="(item, index) in topList.hotSong"
                    :key="index"
                    @tap="onClickMusicItem(item)"
                  >
                    <u-image
                      width="100rpx"
                      height="100rpx"
                      border-radius="10"
                      :src="item.al.picUrl + '?param=270y270'"
                    ></u-image>
                    <view class="index">{{ index + 1 }}</view>
                    <view class="song-name">{{ item.name }}</view>
                    <view style="margin: 0 10rpx">-</view>
                    <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <view class="title">云音乐说唱榜</view>
                <view class="song-list">
                  <view
                    class="song-list-item"
                    v-for="(item, index) in topList.rapSong"
                    :key="index"
                    @tap="onClickMusicItem(item)"
                  >
                    <u-image
                      width="100rpx"
                      height="100rpx"
                      border-radius="10"
                      :src="item.al.picUrl + '?param=270y270'"
                    ></u-image>
                    <view class="index">{{ index + 1 }}</view>
                    <view class="song-name">{{ item.name }}</view>
                    <view style="margin: 0 10rpx">-</view>
                    <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        

        return {}
    }
})
</script>

<style scoped>

</style>